<template>
	<div class="web">
		<!-- logo -->
		<logo></logo>
		<!-- 左云 -->
		<cupidl></cupidl>
		<!-- cloud -->
		<cloud></cloud>
		<!-- 新年桃花运 -->
		<title1></title1>
		<!-- 窗口 -->
		<div class="wind">
			<div class="photo" :style="{backgroundImage: `url(${img}`}" ref="headimg">
				<!-- style="background-image: url(../images/images/body_03.png);" -->
				<!-- :style="{backgroundImage:'url('+ imgfile +')'}" -->
				<div class="scan"></div>
				<img class="photo body-pho" src="../images/images/imgkuang_03.png" alt="">
			</div>
		</div>
		<!-- 按钮 上传照片 -->
		<div class="pho-btn">
			<form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data" onsubmit="return false">
				<div class="p-btn">
					<input type="file" name="avator" @change="uploadfile($event)" accept="image/*" style="opacity: 0; z-index: 999;" >
				</div>
				<a href="" class="aa">上传照片</a>
				<span class="p-type">上传本人照片, 获得新年桃花指数！</span>
			</form>
		</div>
	</div>
</template>

<script>
	import cloud from "@/components/base/cloud.vue";
	import logo from "@/components/base/logo.vue";
	import cupidl from "@/components/base/cupid_l.vue";
	import title1 from "@/components/base/title-1.vue";
	
	import api from "@/config/api.js"
	
	export default {
		data() {
			return {
				imgfile:"",
				timer:"",
				img: require('../images/images/body_03.png')
			}
		},
		components:{
			cloud,
			logo,
			cupidl,
			title1
		},
		created(){
			// 1.获取地址栏上type参数
			const type = this.$route.query.type;
			// 2.将type值，设置到仓库中
			this.$store.commit("set_type",type || "1");
		},
		methods:{
			uploadfile(e){
				let that = this;
				
				var formdata = new FormData();
				var file = new FileReader();
				file.readAsDataURL(e.target.files[0]);
				file.onload = function(){
					let slice = file.result.indexOf('base64,')+7
					formdata.append("avator",file.result);
					that.imgfile = file.result;
					
					if(file.result){
						that.$refs.headimg.style.backgroundImage = 'url('+file.result+')';
					}
					
					that.$store.commit("set_avator",file.result);
					
					if(that.imgfile){
						// 传值
						// that.$emit('imgUrl',that.imgfile);
						// 跳转
						that.timer = setTimeout(()=>{
							that.$router.push({path:'/result'});
						},1000)
						
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px2vw($px){
		@return $px/7.5*1vw
	}
	.web{
		position: relative;
		width: 100vw;
		height: 100vh;
		background-image: url(../images/backgroundimg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: px2vw(141);
	}
	.pho-btn{
		width: px2vw(458);
		position: absolute;
		left: 50%;
		// top: 73%;
		margin-left: px2vw(-229);
		text-align: center;
	}
	.p-btn{
		width: px2vw(458);
		height: px2vw(83);
		text-align: center;
		
		background-image: url(../images/images/button_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(458) px2vw(83);
		
		border-radius: px2vw(40);
		display: block;
		font-size: px2vw(35);
		font-weight: bold;
		color: #ae037c;
		letter-spacing:3px;
		outline:none;
	}
	.p-type{
		width: px2vw(384);
		color: #ffffff;
		font-size: px2vw(24);
		letter-spacing:1px;
	}
	.aa{
		position: absolute;
		top: px2vw(20);
		left: 31%;
		z-index: 1;
		
		font-size: px2vw(35);
		font-weight: bold;
		color: #ae037c;
		letter-spacing:3px;
		text-decoration:none;
		pointer-events:none;
	}
	.wind{
		position: absolute;
		top: px2vw(408);
		left: px2vw(73);
		right: px2vw(73);
		
		width: px2vw(620);
		height: px2vw(620);
		background-image: url(../images/images/window_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(620) px2vw(620);
	}
	.photo{
		position: absolute;
		top: px2vw(143);
		left: px2vw(142);
		right: px2vw(142);
		
		width: px2vw(338);
		height: px2vw(337);
		// background-image: url(../images/images/body_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(338) px2vw(337);
		overflow: hidden;
	}
	.body-pho{
		left: 0;
		right: 0;
		top: 0;
	}
	.scan{
		// -26 开始  168/-26  
		position: absolute;
		top: px2vw(-50);
		animation: myscan 1.5s;
		animation-iteration-count: infinite;
		// animation-direction: alternate;
		
		width: px2vw(338);
		height: px2vw(53);
		z-index: 9;
		
		background-image: url(../images/images/saomiao_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(338) px2vw(53);
	}
	@keyframes myscan
	{
		0%{
			top:px2vw(-50);
		}
		100%{
			top:px2vw(336);
		}
	}
</style>
